theme: Simplify .message styling

- Use fewer properties for layout.
- Use .message-body instead of .message-content to change the body
  color, and remove some color overrides.
- Fix border-radius for last .message-media-control, not only on hover.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/957

diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 936fc133cab4d9badf314817b20c1ff294e18307..c44ba79eccec8ce58b7f9e899c4f85f457837141 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -36,21 +36,16 @@
 
   // icon container
   .message-icon-bin {
-    padding: $base_padding;
-    margin:$base_padding 0;
+    padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
 
     &:rtl {
-      // padding: $base_padding;
+      padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
     }
 
     // icon size and color
     > StIcon {
-      color: $fg_color;
       icon-size: $base_icon_size*2; // 32px
       -st-icon-style: symbolic;
-
-      padding:0;
-      margin:$base_padding;
     }
 
     // fallback
@@ -62,38 +57,26 @@
 
   // content
   .message-content {
-    color: darken($fg_color, 10%);
-    padding: $base_padding 0;
-    margin:$base_margin * 2;
-    &:ltr {
-      margin-left: $base_margin;
-      padding-right:$base_padding;
-    }
-    &:rtl {
-      margin-right: $base_margin;
-      padding-left:$base_padding;
-    }
+    padding: $base_padding + $base_margin * 2;
+    spacing: 4px;
   }
 
   // title
   .message-title {
-    color: $fg_color;
     font-weight: bold;
-    margin-bottom:4px;
   }
 
   // secondary container in title box
   .message-secondary-bin {
-    padding: 0;
+    padding: 0 $base_margin * 2;
 
     // notification time stamp
     > .event-time {
       color: transparentize($fg_color, 0.5);
       @include fontsize($base_font_size - 2);
       text-align: right;
-      margin: 0 $base_margin * 2;
       /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
-      padding-bottom: $base_padding;
+      padding-bottom: 0.13em;
     }
   }
 
@@ -103,6 +86,11 @@
     &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
     &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
   }
+
+  // body
+  .message-body {
+    color: darken($fg_color, 10%);
+  }
 }
 
 /* Media Controls */
@@ -123,9 +111,9 @@
 
   &:insensitive { color: darken($fg_color,40%); }
   
-  // fix border-radius for last button on hover
-  &:last-child:ltr { &:hover {border-radius:  0 $base_border_radius+2 $base_border_radius+2 0;} }
-  &:last-child:rtl { &:hover {border-radius: $base_border_radius+2 0 0 $base_border_radius+2;} }
+  // fix border-radius for last button
+  &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
+  &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
 }
 
 // album-art
@@ -140,6 +128,5 @@
     border: 1px solid transparent;
     border-radius: $base_border_radius;
     icon-size: $base_icon_size * 2 !important;
-    padding: $base_padding * 2;
   }
 }